<template>
    <div class="app-container">
  
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
        <el-form-item label="昵称" prop="name">
          <el-input
            v-model="queryParams.userInfoName"
            placeholder="请输入昵称"
            clearable
            @keyup.enter.native="getList"
          />
        </el-form-item>      

        <el-form-item label="打卡视频" prop="resourceId">
          <el-select v-model="queryParams.resourceId" placeholder="请选择">
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>          
        </el-form-item>  

        <el-form-item label="打卡时间" prop="name">
          <el-date-picker
            v-model="value"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker> 
        </el-form-item>
  
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
          <!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> -->
        </el-form-item>
      </el-form>
  
  
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        >
        <el-table-column
          prop="userInfoNickname"
          label="昵称">
        </el-table-column>
        <el-table-column
          prop="pushDt"
          label="打卡时间">
        </el-table-column>
        <el-table-column
          prop="resourceId"
          label="打卡视频">
          <template slot-scope="scope">
            八段锦第{{ Number(scope.row.resourceId)+1 }}式
          </template>
        </el-table-column>     
        
      </el-table>
  
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.size"
        @pagination="getList"
      />
  
  
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    data(){
      // 打酱油的脚脚丫👣👣👣
      return{
        tableData: [],
        queryParams:{
          userInfoName: '',
          page: 1,
          size: 10,
          beginDt: '',
          endDt: '',
        },
        total: 0,
        value: [],
        options: [{
          value: '0',
          label: '八段锦第1式'
        }, {
          value: '1',
          label: '八段锦第2式'
        }, {
          value: '2',
          label: '八段锦第3式'
        }, {
          value: '3',
          label: '八段锦第4式'
        }, {
          value: '4',
          label: '八段锦第5式'
        }, {
          value: '5',
          label: '八段锦第6式'
        }, {
          value: '6',
          label: '八段锦第7式'
        }, {
          value: '7',
          label: '八段锦第8式'
        }
    ],                
      }
    },
   
   mounted() {
      this.getList();
    },
   methods: {
    getList(){
      console.log('static',this.value);
      if(this.value){
     
        this.queryParams.beginDt = this.value[0];
        this.queryParams.endDt = this.value[1];
      } else{
        this.queryParams.beginDt = '';
        this.queryParams.endDt = '';      
      }
  
      axios.get('http://47.114.84.83/parkinson-system/edu-push-info/findEduPushInfoListFcd',{
        params: {
          ...this.queryParams
        }      
      })
      .then(response => {
        // 处理返回的数据
        this.tableData = response.data.data.data;
        this.total = response.data.data.totalCount
        console.log('static',this.tableData);
  
      })
      .catch(error => {
        // 处理错误
      });    
    },
  
    updateOrder(event) {
      const movedItem = this.list.splice(event.oldIndex, 1)[0];
      this.list.splice(event.newIndex, 0, movedItem);
    },
  },
  }
  </script>
  
  <style>
  #table-names {
    display: flex;
    flex-direction: column;
  }
  </style>
  